<template>
  <div class="signlechoice">
    <el-card>
      <el-form ref="ruleFormRef" style="max-width: 600px" :model="params" :rules="rules" label-width="120px">
        <el-form-item label="年级：" prop="gradeLevel">
          <el-select v-model="params.gradeLevel" placeholder="年级" @change="levelChange">
            <el-option v-for="item in data" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="学科：" prop="subjectId">
          <el-select v-model="params.subjectId" placeholder="学科">
            <el-option v-for="item in subjectlistFilter" :label="`${item.name}(${item.levelName})`" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="题干：" prop="title">
          <el-input v-model="params.title" @click="show('title')"/>
        </el-form-item>
        <el-form-item label="答案：" prop="correct">
            <el-input v-model="params.correct" style="width: 70%;" @click="show('correct')"></el-input>
          
        </el-form-item>
        <el-form-item label="解析：" prop="analyze">
          <el-input v-model="params.analyze" @click="show('analyze')"   />
        </el-form-item>
        <el-form-item label="分数：" prop="title">
            <el-input-number v-model="params.score"  />
        </el-form-item>
        <el-form-item label="难度：" prop="difficult">
          <el-rate v-model="params.difficult" />
        </el-form-item>
       
        <el-form-item >
          <el-button type="primary" @click="Onsubmit">提交</el-button>
          <el-button>重置</el-button>
          <el-button type="info">预览</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-dialog v-model="dialogVisible" title="Tips" width="500" >
    <!-- key 值 每次点开重新渲染 防止弹出框相互关联 -->
  <UEditor @ready="editready"  :key="dialogVisible+''"></UEditor>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirm">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>


  </div>
  
</template>

<script setup lang="ts">
import UEditor from "@/components/UEditor.vue";
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { useRouter } from "vue-router";
import QuestionApi, { type subjectType, type QuestionAddType, type AnwserType } from "@/api/exam/query.api";
const router = useRouter()
let dialogVisible=ref(false)
let dialogVisible1=ref(false)
const params = ref<QuestionAddType>({
  id: null,   //题目id
  questionType: 5,  //题型
  subjectId: null,  //学科
  title: '',  //题干
  gradeLevel: null,  //年级
  analyze: '',  //解析
  correctArray: null,
  correct: '', //正确答案
  score: 0,  //题目分数
  difficult: 0,  //难度
  items: [

  ]
});
let subjectlist = ref<subjectType[]>([])
let subjectlistFilter = ref<subjectType[]>([])
let flag :"title"|"analyze"|"correct"="title"
// 显示富文本对话
function show(f:"title"|"analyze"|"correct"){
  flag =f
  dialogVisible.value=true
}
let editinstance:any=null
let editinstance1:any=null
// 编辑器实例准备好了
function editready(instance:any){
 editinstance=instance
//  取默认值
let v =params.value[flag]
//  给富文本编辑器设置值
editinstance.setContent(v)
}
// 富文本确定
function confirm(){
  // 获取富文本编辑器的内容
  let v= editinstance.getContent()
   params.value[flag]=v
  // 关闭对话框
  dialogVisible.value=false
}




// 获取学科列表
function getsubjectlist() {
  QuestionApi.getsubject().then(data => {
    subjectlist.value = data

  })
}
// 获取年级 ，筛选学科
function levelChange() {
  subjectlistFilter.value = subjectlist.value.filter(item => item.level == params.value.gradeLevel)
}
onMounted(() => {
  getsubjectlist()
})


// 删除
function itemdelete(val: number) {
  params.value.items.splice(val, 1)
  params.value.items.forEach((items, index) => {
    items.prefix = String.fromCharCode(65 + index)
  })
}
// 获取的表单的ref
const ruleFormRef = ref<FormInstance>();
interface arrType {
  value: number
  name: string
}
let data = ref<arrType[]>([
  { value: 1, name: '一年级' },
  { value: 2, name: '二年级' },
  { value: 3, name: '三年级' },
  { value: 4, name: '四年级' },
  { value: 5, name: '五年级' },
  { value: 6, name: '六年级' },
  { value: 7, name: '初一' },
  { value: 8, name: '初二' },
  { value: 9, name: '初三' },
  { value: 10, name: '高一' },
  { value: 11, name: '高二' },
  { value: 12, name: '高三' },
])

const checkitems = (rule: any, value: any, callback: any) => {
  if (value.length > 0) {
    let f = value.every((item: AnwserType) => item.content)
    if (f) {
      callback()
    } else {
      callback(new Error('请输入选项的答案'))

    }
  } else {
    callback(new Error('请添加选项'))
  }
}
const rules = reactive<FormRules<QuestionAddType>>({
  gradeLevel: [
    { required: true, message: "请选择年级", trigger: "blur" },
  ],
  title: [
    {
      required: true,
      message: "请输入题干",
      trigger: "change",
    },
  ],
  analyze: [
    {
      required: true,
      message: "请输入解析",
      trigger: "change",
    },
  ],
  subjectId: [
    {
      required: true,
      message: "请选择学科",
      trigger: "change",
    },
  ],
  difficult: [
    {
      required: true,
      message: "请选择状态",
      trigger: "change",
    },
  ],
  correct: [
    {
      required: true,
      message: "请选择正确答案",
      trigger: "blur"
    },
  ],
});

function Onsubmit() {
  console.log(params.value);
  
  ruleFormRef.value?.validate(f => {
    console.log(f);

    if (f) {
      QuestionApi.Questionadd(params.value).then(res => {
        console.log(res);
        ElMessage({
          type: "success",
          message: "保存成功"
        })
        router.push("/exam/TM")
      })
    }
  })
}
</script>

<style scoped>
.studentadd {
  width: 100%;
  height: 100%;
}
</style>
